import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    state = {
      todo:'',
      list:[]
    }
    change=(e)=>{
      this.setState({
        todo:e.target.value
      })
    }
    keydown=(e)=>{
      // console.log(e.keyCode)
      if(e.keyCode == 13){
        // 证明敲的是回车键
        // this.state.list.push(this.state.todo)
        // this.state.list = this.state.list.concat(this.state.todo)
        this.setState({
          list:this.state.list.concat(this.state.todo),
          todo:''
        })
      }
    }
    del(n){
      console.log(n)
      // this.state.list.splice(n,1);
      this.setState({
        // list:this.state.list
        list:this.state.list.filter((item,index)=>index !== n)
      })
    }
    render() {
        let {todo,list} = this.state;
        // console.log(list)
        return <div className=''>
            {/* {list}   */}
            <input type="text" value={todo} onChange={this.change} onKeyDown={this.keydown}/>
            <ul>
              {
                list.map((item,index)=><li key={item}>{item} <button onClick={()=>{this.del(index)}}>X</button></li>)
              }
              {/* <li>adgasdgf  <button>X</button></li> */}
            </ul>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))